/**
 * create by young (young2f@outlook.com) on 2020/9/12
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Form, Input, Popconfirm, Select, Table, Tabs} from 'antd';
import styles from '../index.less';
import FormBase from '../../components/Base/FormBase';
import notify from "../../components/NotificationExtra";
import ViewTitle from "../../components/ViewTitle";
import {FormField, ModalView, SearchForm} from "antd-extra";
import Button from "antd/es/button";
import ModalCreateOrEditCustomerRecord from "./modal/ModalCreateOrEditCustomerRecord";
import moment from "moment";
import ModalCreateOrEditSelf from "./modal/ModalCreateOrEditSelf";

const _ = require('lodash');
const {Option} = Select;
const table = 'DicExperiment';

@Form.create()
@connect(({
            tenant,
            global,
            experiment,
            dic
          }) => ({...tenant, ...global, ...dic, ...experiment}))
export default class Index extends FormBase {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    this.props.dispatch && this.props.dispatch({
      type: 'global/getModel',
      payload: {table, tenantCode: this.getTenantCode()}
    });
    const payload = this.props.form.getFieldsValue();
    _.map(payload, (value, key) => {
      if (value === '') {
        payload[key] = undefined;
      }
    });
    this.props.dispatch({
      type: 'experiment/findRecordMany',
      payload
    });
  }


  onDelete = record => {
    const {code} = record;
    this.props.dispatch({
      type: 'global/deletePic',
      payload: {table, tableCode: code}
    });
    this.props.dispatch({
      type: 'dic/deleteOne',
      payload: {table, code}
    }).then(res => {
      this.requestReturn(res);
      this.componentDidMount();
    });
  };

  onCreateOrEditSelf = record => {
    const title = record ? '编辑实验记录' : "创建实验记录";
    const type = record ? "experiment/updateRecord" : "experiment/createRecord";
    ModalView.open(ModalCreateOrEditSelf,
      {
        title,
        width: '1080px'
      }, {
        record, table,
        callback: async (payload) => {
          payload.recordType = "other";
          this.props.dispatch({
            type,
            payload
          }).then(res => {
            this.requestReturn(res);
            this.componentDidMount();
          });
        }
      });
  };

  onCreateOrEditCustomer = record => {
    const title = record ? '编辑实验记录' : "创建实验记录";
    const type = record ? "experiment/updateRecord" : "experiment/createRecord";
    ModalView.open(ModalCreateOrEditCustomerRecord,
      {
        title,
        width: '1280px'
      }, {
        record, table,
        callback: async (payload) => {
          console.log('ppppp', payload);
          payload.recordType = "customer";
          this.props.dispatch({
            type,
            payload
          }).then(res => {
            this.requestReturn(res);
            this.componentDidMount();
          });
        }
      });
  };
  //
  // createPic = payload => {
  //   const {aFileList = [], bFileList = [], cFileList = [], sFileList = []} = payload;
  //
  //   delete payload['aFileList'];
  //   delete payload['bFileList'];
  //   delete payload['cFileList'];
  //   delete payload['sFileList'];
  //   let code = payload.code + "-a";
  //   console.log('AAAA', code);
  //   this.props.dispatch({
  //     type: 'global/createPic',
  //     payload: {table, tableCode: payload.code, code, label: 'a', fileList: aFileList}
  //   });
  //   code = payload.code + "-b";
  //   this.props.dispatch({
  //     type: 'global/createPic',
  //     payload: {table, tableCode: payload.code, code, label: 'b', fileList: bFileList}
  //   });
  //   code = payload.code + "-c";
  //   this.props.dispatch({
  //     type: 'global/createPic',
  //     payload: {table, tableCode: payload.code, code, label: 'c', fileList: cFileList}
  //   });
  //   code = payload.code + "-s";
  //   this.props.dispatch({
  //     type: 'global/createPic',
  //     payload: {table, tableCode: payload.code, code, label: 's', fileList: sFileList}
  //   });
  // };
  getSearchFields = () => {
    const arr = [
      <FormField
        label="客户名称"
        name="customer"
        key={2}
      >
        <Input allowClear placeholder="请输入客户名称"/>
      </FormField>,
      <FormField
        label="业务员"
        name="salesman"
        key={4}
      >
        <Input allowClear placeholder="请输入业务员"/>
      </FormField>,
      <FormField
        label="实验类型"
        name="experimentType"
        key={5}
      >
        <Input allowClear placeholder="请输入"/>
      </FormField>
    ];
    return arr;

  };

  customerCols() {
    return [
      {
        title: '日期', dataIndex: 'date', key: "date", render: record => {
          return <div>{moment(record).format('YYYY-MM-DD')}</div>;
        }
      },
      {title: '客户', dataIndex: 'customer', key: "customer"},
      {title: '业务员', dataIndex: 'salesman', key: "salesman"},
      {title: '实验员', dataIndex: 'experimentMan', key: "experimentMan"},
      {title: '实验类型', dataIndex: 'experimentType', key: "experimentType"},
      {
        title: '操作', dataIndex: 'opt', key: "opt", render: (value, record) => {
          return <span>
        <a style={{marginRight: '6px'}}
           onClick={() => this.onCreateOrEditCustomer(record)}
        >编辑</a>
        <Popconfirm
          title="确认删除"
          onConfirm={() => {
            const {code} = record;
            this.props.dispatch({
              type: 'experiment/deleteRecord',
              payload: {code}
            }).then(res => {
              this.requestReturn(res);
              this.componentDidMount();
            });

          }}
          okText="是"
          cancelText="否"
        >
            <a>删除</a>
          </Popconfirm>
      </span>;
        }
      }
    ];
  }

  otherCols() {
    return [
      {
        title: '日期', dataIndex: 'date', key: "date", render: record => {
          return <div>{moment(record).format('YYYY-MM-DD')}</div>;
        }
      },
      {title: '实验名称', dataIndex: 'experimentName', key: "experimentName"},
      {title: '实验目的或课题', dataIndex: 'target', key: "target"},
      {title: '实验员', dataIndex: 'experimentMan', key: "experimentMan"},
      {title: '实验要求或标准', dataIndex: 'experimentRequire', key: "experimentRequire"},
      {title: '实验过程描述', dataIndex: 'experimentDesc', key: "experimentDesc"},
      {title: '实验结论', dataIndex: 'conclusion', key: "conclusion"},
      {
        title: '操作', dataIndex: 'opt', key: "opt", render: (value, record) => {
          return <span>
        <a style={{marginRight: '6px'}}
           onClick={() => this.onCreateOrEditSelf(record)}
        >编辑</a>
        <Popconfirm
          title="确认删除"
          onConfirm={() => {
            const {code} = record;
            this.props.dispatch({
              type: 'experiment/deleteRecord',
              payload: {code}
            }).then(res => {
              this.requestReturn(res);
              this.componentDidMount();
            });

          }}
          okText="是"
          cancelText="否"
        >
            <a>删除</a>
          </Popconfirm>
      </span>;
        }
      }
    ];
  }

  render() {
    const {_notify, form, experimentRecords = []} = this.props;
    if (_notify) {
      notify(_notify);
    }
    const customerRecords = [];
    const selfRecords = [];
    _.map(experimentRecords, record => {
      if (record.recordType === "customer") {
        customerRecords.push(record);
      }
      if (record.recordType === "other") {
        selfRecords.push(record);
      }
    });

    return (
      <Form className={styles.content}>
        <Tabs defaultActiveKey={'1'}>
          <Tabs.TabPane tab={'客户实验'} key={"1"}>
            <SearchForm
              style={{marginLeft: '6px', marginRight: '6px'}}
              onSearch={() => {
                this.state.current = 1;
                this.componentDidMount();
              }}
              onReset={this.handleReset}
              cols={4}
              min={8}
              expandText="展开"
              form={form}
            >
              {this.getSearchFields()}
            </SearchForm>
            <ViewTitle title={'客户实验记录表'}
                       actions={[<Button type="primary"
                                         onClick={() => this.onCreateOrEditCustomer()}
                       >添加</Button>

                       ]}
            ></ViewTitle>
            <Table
              className={styles.antTable}
              bordered={true}
              columns={this.customerCols()}
              dataSource={customerRecords}
              scroll={{x: true}}
              pagination={true}
            ></Table>
          </Tabs.TabPane>
          <Tabs.TabPane tab={'其它实验'} key={"2"}>
            <SearchForm
              style={{marginLeft: '6px', marginRight: '6px'}}
              onSearch={() => {
                this.state.current = 1;
                this.componentDidMount();
              }}
              onReset={this.handleReset}
              cols={4}
              min={8}
              expandText="展开"
              form={form}
            >
              {[<FormField
                label="实验人"
                name="experimentMan"
                key={2}
              >
                <Input allowClear placeholder="请输入"/>
              </FormField>,
                <FormField
                  label="实验名称"
                  name="experimentName"
                  key={2}
                >
                  <Input allowClear placeholder="请输入"/>
                </FormField>]}
            </SearchForm>
            <ViewTitle title={'自开发实验记录表'}
                       actions={[<Button type="primary"
                                         onClick={() => this.onCreateOrEditSelf()}
                       >添加</Button>

                       ]}
            ></ViewTitle>
            <Table
              className={styles.antTable}
              bordered={true}
              columns={this.otherCols()}
              dataSource={selfRecords}
              scroll={{x: true}}
              pagination={true}
            ></Table>
          </Tabs.TabPane>
        </Tabs>

      </Form>
    );
  }
}
